<template>
  <section>
    <div class="custorm--modelbox marketcountdown-edit">
      <renohome-right-nav :custormItemData="custormItemData" @rightNavChange="rightNavChange" showChange="1"></renohome-right-nav>
      <section v-if="nrActive">
        <div class="es-form-item">
          <div class="form-label mb-20">图片</div>
          <div
            class="img uploadSource"
            @click="uploadtoggle('image')"
            :style="{'background-image':`url(${getPath(custormItemData.params.thumb.file_path)})`,'width': '80px','height':'80px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"
          >
          </div>
        </div>

        <div class="es-form-item">
          <div class="form-label mb-20">活动链接</div>
          <div
            class="readonly-div"
          >
            <div class="readonly ivu-input-wrapper ivu-input-wrapper-default ivu-input-type" @click="uploadtoggle('link')">
              <input
                autocomplete="off"
                spellcheck="false"
                :value="custormItemData.params.link"
                type="text"
                placeholder="请选择链接"
                readonly="readonly"
                class="ivu-input ivu-input-default"
              >
            </div> <i
              class="icon icon-fujian readonly-icon"
              style="left: 12px;margin-top:-3px;"
            ></i>
          </div>
        </div>

        <div class="es-form-item">
          <div class="form-label mb-20">开始时间</div>
          <el-date-picker
            v-model="custormItemData.params.begintime"
            type="datetime"
            placeholder="请选择开始时间"
            size="small"
            style="width:100%;line-height: 1;"
          >
          </el-date-picker>
        </div>

        <div class="es-form-item">
          <div class="form-label mb-20">结束时间</div>
          <el-date-picker
            v-model="custormItemData.params.endtime"
            type="datetime"
            placeholder="请选择结束时间"
            size="small"
            style="width:100%;line-height: 1;"
          >
          </el-date-picker>
        </div>
      </section>
      <section v-if="fgActive">
        <div class="es-form-item ">
          <div
            class="item-inner block"
            style="transform: scale(0.8) translate(-50px, -50px); width: 375px;"
          ><label
              class="button-img block"
              @click="changePattern(1)"
              v-bind:class="{active:custormItemData.style.display==1}"
            >
              <div class="es-countdown-group"><img
                  :src="getPath('default_banner.png')"
                  alt=""
                >
                <div class="group "><img
                    :src="getPath('countdown_bg1.png')"
                    alt=""
                  >
                  <div class="title">距活动开始还有</div>
                  <div
                    class="time"
                    style="top: 26px; left: 14px;"
                  ><span style="padding: 0px 2px;">0</span> <span style="padding: 0px 2px;">1</span>
                    <span
                      class="span"
                      style="padding: 0px 2px;"
                    >天</span> <span style="padding: 0px 2px;">2</span>
                    <span style="padding: 0px 2px;">2</span> <span
                      class="span"
                      style="padding: 0px 2px;"
                    >小时</span>
                    <span style="padding: 0px 2px;">1</span> <span style="padding: 0px 2px;">8</span> <span
                      class="span"
                      style="padding: 0px 2px;"
                    >分</span></div>
                  <div>抢先查看</div>
                </div>
              </div>
            </label></div>
          <div
            class="item-inner block"
            style="transform: scale(0.8) translate(-50px, -95px); width: 375px;"
          ><label
              class="button-img block"
              @click="changePattern(2)"
              v-bind:class="{active:custormItemData.style.display==2}"
            >
              <div class="es-countdown-group style2"><img
                  :src="getPath('default_banner.png')"
                  alt=""
                >
                <div class="group "><img
                    :src="getPath('countdown_bg2.png')"
                    alt=""
                  >
                  <div
                    class="title"
                    style="top: 8px;"
                  >距活动开始还有</div>
                  <div
                    class="time"
                    style="top: 20px;"
                  ><span style="padding: 0px 2px;padding-left: 10px;">0</span> <span style="padding: 0px 2px;">1</span>
                    <span
                      class="span"
                      style="padding: 0px 2px;"
                    >天</span> <span style="padding: 0px 2px;">2</span>
                    <span style="padding: 0px 2px;">2</span> <span
                      class="span"
                      style="padding: 0px 2px;"
                    >小时</span>
                    <span style="padding: 0px 2px;">1</span> <span style="padding: 0px 2px;">8</span> <span
                      class="span"
                      style="padding: 0px 2px;"
                    >分</span></div>
                  <div>抢先查看</div>
                </div>
              </div>
            </label></div>
        </div>
      </section>
    </div>
  </section>
</template>
<script>
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      nrActive: true,
      fgActive: false
    }
  },
  computed: {

  },
  watch: {},

  mounted() { },

  methods: {
    pathtoggle() {
      this.$refs.choosepath.pathTrigger()
    },
    uploadFileCallBack(files) {
      const { key } = files
      if (key === 'ChooseLink') {
        const { currentRow: [file_path] } = files
        if (file_path) {
          this.custormItemData.params.link = file_path
        } else {
          this.$message.error('请选择链接~!')
        }
      } else {
        const { displayData: [file_path] } = files
        if (file_path) {
          this.custormItemData.params.thumb = file_path
        }
      }
    },
    uploadtoggle(type) {
      this.output({ type, params: { editKey: this.custormItemData.key }})
    }
  }
}

</script>

<style lang="scss" scoped>
.custorm--modelbox.marketcountdown-edit {
  .readonly-div {
    position: relative;
    flex-grow: 1;
  }

  .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  .ivu-input {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 12px;
    font-size: 12px;
    background: #e8effc !important;
    border: 0;
    padding-left: 36px !important;
    cursor: pointer;
    border-radius: 4px;
    color: #333;
    background-image: none;
    position: relative;
    -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      -webkit-box-shadow 0.2s ease-in-out;
    transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
      box-shadow 0.2s ease-in-out;
  }

  .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    padding-left: 18px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .readonly-div .readonly-icon {
    position: absolute;
    top: 5px;
    left: 12px;
  }

  .es-countdown-group {
    padding: 12px;
  }

  .es-countdown-group > img {
    width: 100%;
    display: block;
    border-radius: 8px 8px 0 0;
  }

  .button-img img {
    max-width: 30px;
    max-height: 30px;
  }

  .button-img.block img {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }

  .es-countdown-group .group {
    position: relative;
    height: 66px;
  }

  .es-countdown-group .group img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
  }

  .es-countdown-group .group .title {
    position: absolute;
    top: 12px;
    left: 15px;
    line-height: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }

  .es-countdown-group .group .time {
    position: absolute;
    top: 36px;
    left: 16px;
    font-size: 13px;
    line-height: 42px;
    letter-spacing: 0.6px;
    font-family: PingFang SC, Microsoft YaHei, \\5fae\8f6f\96c5\9ed1, Arial,
      sans-serif;
  }

  .es-countdown-group .group > div:last-of-type {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 28px;
    font-style: italic;
    font-weight: 700;
    color: #fc5b16;
    font-size: 12px;
    line-height: 15px;
  }

  .es-countdown-group.style2 .group > div:last-of-type {
    color: #fff;
    top: 15px;
    right: 22px;
  }

  .es-countdown-group .group .time span {
    display: inline-block;
    padding: 0 2.5px;
    color: #fc5b16;
    font-weight: 700;
  }

  .es-countdown-group .group .time span.span {
    color: #fff;
  }

  .es-countdown-group.style2 .group {
    top: -22px;
  }

  .es-countdown-group.style2 .group .time span.span {
    color: #fff;
  }

  .es-countdown-group.style2 .group .time span {
    color: #4a78f0;
  }
}
</style>
